<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Qunee Graph Editor V2.7.8.5</title>
    <link rel="stylesheet" href="common/css/global.css"/>
    <link rel="stylesheet" href="common/color-picker/color-picker.css"/>
    <link rel="stylesheet" href="common/popup/popup.css"/>
    <link rel="stylesheet" href="common/modal/dialog.css"/>
    <link rel="stylesheet" href="app.css"/>
</head>
<body style="margin: 0px">
<div id="app">
    <header>
        <a href="http://qunee.com" style="display: inline-block;">
            <div class="q-logo" title="qunee.com"></div>
        </a><label style="color: #777; font-size: 1.1em;">Light High Efficiency Graph Component</label>
        <ul>
            <li><a href="http://qunee.com">Home</a></li>
            <li><a href="http://blog.qunee.com">Blog</a></li>
            <li><a href="http://doc.qunee.com">Doc</a></li>
            <li><a href="http://demo.qunee.com">Demo</a></li>
            <li class="new"><a href="http://map.qunee.com/">Map</a></li>
            <li class="active"><a href="http://demo.qunee.com/editor/">Editor</a></li>
            <li><a href="http://demo.qunee.com/svg2canvas/">SVG2Canvas</a></li>
        </ul>
    </header>
    <template id="editor-template">
        <link rel="stylesheet" href="common/property/form.css"/>
        <link rel="stylesheet" href="common/property/property.css"/>
<!--        <link rel="stylesheet" href="common/color-picker/color-picker.css"/>-->
        <link rel="stylesheet" href="common/toolbox/toolbox.css"/>
        <link rel="stylesheet" href="common/toolbar/toolbar.css"/>
<!--        <link rel="stylesheet" href="common/popup/popup.css"/>-->
<!--        <link rel="stylesheet" href="common/modal/dialog.css"/>-->
        <link rel="stylesheet" href="common/vue/graph.editor.css"/>
        <div ref="toolbar_pane" class="toolbar">
            <div ref="toolbar" style="display: inline-block;"></div>
        </div>
        <div style="display: flex; width: 100%; flex: 1 1 auto; overflow: hidden;">
            <div ref="toolbox" class="toolbox" style="flex: 1 0 200px;"></div>
            <div style="position: relative; flex: 10 1 500px;">
                <div ref="canvas" style="width: 100%; height: 100%;"></div>
                <div ref="overview"
                     style="background-color: rgba(255, 255, 255, 0.8); position: absolute; right: 0px; top: 0px; width: 200px; height: 150px; margin: 10px;"></div>
                <div ref="property" class="property q-property-pane"></div>
                <div ref="json_pane" class="json-pane" style="display: none;">
                    <textarea ref="json_textarea" spellcheck="false"></textarea>
                    <div ref="json_btn_group" class="btn-group" style="position: absolute; top: 5px; right: 20px;">
                        <div class="btn" @click="exportJSON">Update</div>
                        <div class="btn" @click="submitJSON">Submit</div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <div class="q-graph-editor" id="editor"></div>

    <script type="module">
        import {Editor} from "./graph.editor.js?";
        import {initDemo} from "./js/main.js";

        let editor = new Editor('editor', {template: 'editor-template'});
        initDemo(editor, '../public/data/topo2.json');
    </script>
    <footer id="footer" role="contentinfo">
        <a href="http://www.beian.miit.gov.cn" target="_blank">沪ICP备17006876号</a>
        Copyright © 2014 - 2021 上海酷利软件有限公司 Shanghai Kuli Software Co.,Ltd. All right reserved. Email: <span style="color: #2898E0;">support#qunee.com</span>. 仓库: <a href="https://github.com/qunee/graph.editor_vue"><b>graph.editor_vue</b></a>
    </footer>
</div>
</body>
</html>